<template>
  <lay-container fluid="true" class="role-box">
    <lay-card>
      <lay-form style="margin-top: 10px">
        <lay-row>
          <lay-col :md="5">
            <lay-form-item label="角色名称" label-width="80">
              <lay-input v-model="searchQuery.requestBody.roleName" placeholder="请输入" size="sm" :allow-clear="true"
                style="width: 98%"></lay-input>
            </lay-form-item>
          </lay-col>
          <lay-col :md="5">
            <lay-form-item label="角色标识" label-width="80">
              <lay-input v-model="searchQuery.requestBody.roleKey" placeholder="请输入" size="sm" :allow-clear="true"
                style="width: 98%"></lay-input>
            </lay-form-item>
          </lay-col>
          <lay-col :md="5">
            <lay-form-item label="备注" label-width="80">
              <lay-input v-model="searchQuery.requestBody.remark" placeholder="请输入" size="sm" :allow-clear="true"
                style="width: 98%"></lay-input>
            </lay-form-item>
          </lay-col>
          <lay-col :md="5">
            <lay-form-item label-width="20">
              <lay-button style="margin-left: 20px" type="normal" size="sm" @click="toSearch">
                查询
              </lay-button>
              <lay-button size="sm" @click="toReset"> 重置 </lay-button>
            </lay-form-item>
          </lay-col>
        </lay-row>
      </lay-form>
    </lay-card>
    <!-- table -->
    <div class="table-box">
      <lay-table :page="page" :height="'100%'" :columns="columns" :loading="loading" :default-toolbar="true"
        :data-source="dataSource" v-model:selected-keys="selectedKeys" @change="change" @sortChange="sortChange">
        <template v-slot:toolbar>
          <lay-button size="sm" type="primary" @click="changeediteLayerShow('新增', null)">
            <lay-icon class="layui-icon-addition"></lay-icon>
            新增</lay-button>
          <lay-button size="sm" @click="toRemove">
            <lay-icon class="layui-icon-delete"></lay-icon>
            删除
          </lay-button>
        </template>
        <template v-slot:operator="{ row }">
          <lay-button size="xs" border="green" border-style="dashed"
            @click="changeediteLayerShow('编辑', row)">编辑</lay-button>
          <lay-button size="xs" border="blue" border-style="dashed" @click="toPrivileges(row)">分配权限</lay-button>
          <lay-popconfirm content="确定要删除此角色吗?" @confirm="confirm(row)" @cancel="cancel">
            <lay-button size="xs" border="red" border-style="dashed">删除</lay-button>
          </lay-popconfirm>
        </template>
      </lay-table>
    </div>

    <lay-layer v-model="editeLayerShow" :title="title" :area="['500px', '370px']">
      <div style="padding: 20px">
        <lay-form :model="editDataInfo" ref="layFormRef11" required>
          <lay-form-item label="角色名称" prop="roleName">
            <lay-input v-model="editDataInfo.roleName"></lay-input>
          </lay-form-item>
          <lay-form-item label="角色标识" prop="roleKey">
            <lay-input v-model="editDataInfo.roleKey"></lay-input>
          </lay-form-item>
          <lay-form-item label="数据权限" prop="dataScope">
            <lay-input placeholder="请输入数据权限" v-model="editDataInfo.dataScope"></lay-input>
          </lay-form-item>
          <lay-form-item label="顺序号" prop="roleSort">
            <lay-input-number placeholder="请输入顺序号" v-model="editDataInfo.roleSort"></lay-input-number>
          </lay-form-item>
          <lay-form-item label="描述" prop="remark">
            <lay-textarea placeholder="请输入描述" v-model="editDataInfo.remark"></lay-textarea>
          </lay-form-item>
        </lay-form>
        <div style="width: 100%; text-align: center">
          <lay-button size="sm" type="primary" @click="toSubmit">保存</lay-button>
          <lay-button size="sm" @click="toCancel">取消</lay-button>
        </div>
      </div>
    </lay-layer>

    <lay-layer v-model="assignmentsMenuLayer" title="分配权限" :area="['500px', '450px']">
      <div style="height: 320px; overflow: auto">
        <lay-tree style="margin-left: 40px" :tail-node-icon="false" :data="layerMenuData" :showCheckbox="showCheckbox2"
          v-model:checkedKeys="checkedKeys2">
          <template #title="{ data }">
            <lay-icon :class="data.icon"></lay-icon>
            {{ data.title }}
          </template>
        </lay-tree>
      </div>
      <lay-line></lay-line>
      <div style="width: 90%; text-align: right">
        <lay-button size="sm" type="primary" @click="executeBindMenu">保存</lay-button>
        <lay-button size="sm" @click="toCancel">取消</lay-button>
      </div>
    </lay-layer>
  </lay-container>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { layer } from '@layui/layui-vue'
import { getBaseUrl } from '../../../api/http'
import { useUserStore } from "../../../store/user";
import { listByLimit, saveBySuper, updateBySuper, delBySuper, delsBySuper, dispenseMenuTree,roleBindMenu } from '../../../api/module/role-manager'

const searchQuery = ref({
  requestBody: {
    roleName: '',
    roleKey: '',
    remark: '',
  },
  pageIndex: 1,
  pageSize: 10,
})

// 页面加载渲染
const loadingFlag = ref(true);

// 重置表格
function toReset() {
  searchQuery.value = {
    requestBody: {
      roleName: '',
      roleKey: '',
      remark: '',
    },
    pageIndex: 1,
    pageSize: 10,
  }
  toSearch()
}

// 搜索表格
function toSearch() {
  page.current = 1
  setTimeout(() => {
    loadDataSource(page.current, page.limit)
  }, 1000)
}

const loading = ref(false)

const selectedKeys = ref()

const page = reactive({ current: 1, limit: 10, total: 4 })

const columns = ref([
  { title: '选项', width: '55px', type: 'checkbox', fixed: 'left' },
  { title: '角色Id', width: '120px', key: 'id', fixed: 'left', sort: 'desc' },
  { title: '角色名称', width: '80px', key: 'roleName' },
  { title: '角色标识', width: '80px', key: 'roleKey' },
  { title: '备注', width: '260px', key: 'remark' },
  { title: '数据权限', width: '120px', key: 'dataScope' },
  { title: '创建时间', width: '120px', key: 'createTime' },
  { title: '顺序号', width: '80px', key: 'roleSort' },
  {
    title: '操作',
    width: '150px',
    customSlot: 'operator',
    key: 'operator',
    fixed: 'right'
  }
])
const change = (page: any) => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 1000)
}
const sortChange = (key: any, sort: number) => {
  layer.msg(`字段${key} - 排序${sort}, 你可以利用 sort-change 实现服务端排序`)
}
const Uploadheaders = ref<any>(null)
//模块加载完成---就执行
onMounted(() => {
  // 执行表格初始化渲染
  queryDataByServerForLimit();
  // 初始胡设置Header 
  const userInfoStore = useUserStore();
  Uploadheaders.value = {
    token: userInfoStore.token,
    clientId: userInfoStore.clientId
  }
});

// 获取接口用户信息
const queryDataByServerForLimit = async () => {
  try {
    const dataCallBack = await listByLimit(searchQuery.value);
    // 重置表格的数据
    const responBody = dataCallBack.data
    dataSource.value = [];
    dataSource.value = responBody.responseBody
    page.total = responBody.totalNum
    page.current = responBody.pageIndex
  } catch (error) {
    console.error('Error fetching data:', error);

  } finally {
    // 关闭数据加载渲染
    loadingFlag.value = false;
  }
}
const dataSource = ref([
  {
    id: '1',
    roleName: '管理员',
    remark: '花开堪折直须折,莫待无花空折枝.',
    roleKey: '花开堪折直须折,莫待无花空折枝.',
    dataScope: '==',
    createTime: '2022-02-09 16:35:07',
    roleSort: 1
  }
])

const changeStatus = (isChecked: boolean, row: any) => {
  dataSource.value.forEach((item: any) => {
    if (item.id === row.id) {
      layer.msg('Success', { icon: 1 }, () => {
        item.flage = isChecked
      })
    }
  })
}
const remove = () => {
  layer.msg(selectedKeys.value, { area: '50%' })
}
// 搜索渲染表格
const loadDataSource = async (pageIndex: number, pageSize: number) => {
  try {
    loading.value = true
    searchQuery.value.pageIndex = pageIndex
    searchQuery.value.pageSize = pageSize
    const dataCallBack = await listByLimit(searchQuery.value);
    const response = dataCallBack.data
    // 重置表格的数据
    const list = response.responseBody || [];
    dataSource.value = list;
    page.total = response.totalNum
    page.current = response.pageIndex
  } catch (error) {
    console.error('Error fetching data:', error);
  } finally {
    // 关闭数据加载渲染
    loading.value = false;
  }
}


const editDataInfo = ref({
  roleName: '',
  roleKey: '',
  remark: '',
  dataScope: '',
  roleSort: 0
})
const layFormRef11 = ref()
const editeLayerShow = ref(false)

const title = ref('新增')
const changeediteLayerShow = (text: any, row: any) => {
  title.value = text
  if (row != null) {
    let info = JSON.parse(JSON.stringify(row))
    editDataInfo.value = info
  } else {
    editDataInfo.value = {
      roleName: '',
      roleKey: '',
      remark: '',
      dataScope: '',
      roleSort: 0
    }
  }
  editeLayerShow.value = !editeLayerShow.value
}
const submit11 = function () {
  layFormRef11.value.validate((isValidate: any, model: any, errors: any) => {
    layer.open({
      type: 1,
      title: '表单提交结果',
      content: `<div style="padding: 10px"><p>是否通过 : ${isValidate}</p> <p>表单数据 : ${JSON.stringify(
        model
      )} </p> <p>错误信息 : ${JSON.stringify(errors)}</p></div>`,
      shade: false,
      isHtmlFragment: true,
      btn: [
        {
          text: '确认',
          callback(index: number) {
            layer.close(index)
          }
        }
      ],
      area: '500px'
    })
  })
}
// 清除校验
const clearValidate11 = function () {
  layFormRef11.value.clearValidate()
}
// 重置表单
const reset11 = function () {
  layFormRef11.value.reset()
}

// 删除按钮
function toRemove() {
  if (selectedKeys.value.length == 0) {
    layer.msg('您未选择数据，请先选择要删除的数据', { icon: 3, time: 2000 })
    return
  }
  layer.confirm('您将删除所有选中的数据？', {
    title: '提示',
    btn: [
      {
        text: '确定',
        callback: (id: any) => {

          layer.close(id)
        }
      },
      {
        text: '取消',
        callback: (id: any) => {
          layer.msg('您已取消操作')
          layer.close(id)
        }
      }
    ]
  })
}
// 保存用戶信息
function toSubmit() {
  const requestBody = editDataInfo.value;
  saveBySuper(requestBody).then(resp => {
    if (resp.success) {
      layer.msg('保存成功！', { icon: 1, time: 1000 })
      editeLayerShow.value = false;
      toSearch();
    } else {
      layer.msg('保存失败' + resp.msg, { icon: 2, time: 1000 })
    }
  }).catch(err => {
    console.log(err);
  })
}
function toCancel() {
  editeLayerShow.value = false
  assignmentsMenuLayer.value = false
}
function confirm(row: any) {
  delBySuper(row.id).then(resp => {
    if (resp.success) {
      layer.msg('删除成功', { icon: 1, time: 2000 })
    } else {
      layer.msg('删除失败:' + resp.msg, { icon: 2, time: 2000 })
    }
  }).catch(err => {
    console.log(err);
  }
  )
}
function cancel() {
  layer.msg('您已取消操作')
}

// 分配菜单弹出
const assignmentsMenuLayer = ref(false)

const checkedKeys2 = ref([])

const showCheckbox2 = ref(true)

// 分配菜单数据
const layerMenuData = ref([
  {
    icon: 'layui-icon-home',

    title: '工作空间',
    id: 1,
    checked: true,
    spread: true,
    children: [
      {
        title: '工作台',
        icon: 'layui-icon-util',
        id: 3
      },
      {
        title: '控制台',
        icon: 'layui-icon-engine',
        id: 4,
        spread: true
      },
      {
        title: '分析页',
        id: 20,
        icon: 'layui-icon-chart-screen'
      },
      {
        title: '监控页',
        id: 21,
        icon: 'layui-icon-find-fill'
      }
    ]
  },
  {
    title: '表单页面',
    icon: 'layui-icon-table',
    id: 2,
    spread: true,
    children: [
      {
        title: '基础表单',
        icon: 'layui-icon-form',
        id: 5,
        spread: true
      },
      {
        title: '复杂表单',
        icon: 'layui-icon-form',
        id: 6
      }
    ]
  },
  {
    title: '个人中心',
    icon: 'layui-icon-slider',
    id: 16,
    children: [
      {
        icon: 'layui-icon-username',
        title: '我的资料',
        id: 17,
        fixed: true
      },
      {
        title: '我的消息',
        icon: 'layui-icon-email',
        id: 27
      }
    ]
  },
  {
    title: '系统管理',
    icon: 'layui-icon-set',
    id: 19,
    children: [
      {
        icon: 'layui-icon-user',
        title: '用户管理',
        id: 25,
        fixed: true
      },
      {
        title: '角色管理',
        icon: 'layui-icon-group',
        id: 29
      },
      {
        title: '机构管理',
        icon: 'layui-icon-transfer',
        id: 29
      }
    ]
  }
])
// 绑定当前弹出菜单赋权框的角色Id
const toPrivilegesId = ref(null);
// 打开分配菜单弹出层
function toPrivileges(row: any) {
  dispenseMenuTree(row.id).then(resp => {
    if (resp.success) {
      // 加载数据
      layerMenuData.value = resp.data.nextLayer
      // 选中回写
      checkedKeys2.value = resp.data.currentLayer
      // 打开弹窗
      assignmentsMenuLayer.value = true
      // 弹出基础层数据Id
      toPrivilegesId.value = row.id;
    } else {
      layer.msg('加载失败:' + resp.msg, { icon: 2, time: 2000 })
    }
  }).catch(err => {
    console.log(err);
  });
}

// 绑定菜单和角色
function executeBindMenu() {
  // 选中的数据 checkedKeys2.value
  const reqBody = {
    "roleId": toPrivilegesId.value,
    "menuIds": checkedKeys2.value
  }
  roleBindMenu(reqBody).then(resp => {
    if (resp.success) {
      // 加载数据
      layer.msg('绑定成功:' + resp.msg, { icon: 1, time: 2000 })
      // 重置选中
      checkedKeys2.value = [];
      assignmentsMenuLayer.value = false;
    } else {
      layer.msg('绑定失败:' + resp.msg, { icon: 2, time: 2000 })
    }
  }).catch(err => {
    console.log(err);
  });
}
</script>

<style scoped>
.role-box {
  width: calc(100vw - 220px);
  height: calc(100vh - 110px);
  margin-top: 10px;
  box-sizing: border-box;
  overflow: hidden;
}

.top-search {
  margin-top: 10px;
  padding: 10px;
  height: 40px;
  border-radius: 4px;
  background-color: #fff;
}

.table-box {
  margin-top: 10px;
  padding: 10px;
  height: 700px;
  width: 100%;
  border-radius: 4px;
  box-sizing: border-box;
  background-color: #fff;
}

.search-input {
  display: inline-block;
  width: 98%;
  margin-right: 10px;
}

.isChecked {
  display: inline-block;
  background-color: #e8f1ff;
  color: red;
}
</style>